<template>
    <div class="app">
        <div class="btns">
            <button @click="exportH">保存(ctrl + s)</button>
            <button @click="parserJs">解析</button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { GraphView } from "./js/components/GraphView"
import { Parser } from "./js/GraphParser"
import * as js from "@/javascript"
import { onMounted } from "vue"
import { KeyHelper } from "./utils/KeyHelper";

// 获取保存的节点json数据
const list = JSON.parse(localStorage.getItem("data") || '[]')

// 创建图形容器
const graphView = new GraphView()

// 定义一个组合按键，名称为save，名称可以自己随意起，触发次数2次,一次用于下面的保存操作，一次用于移除浏览器的默认行为
// 该按键实例 创建自KeyHelper 类 ，KeyHelper在 @/utils/KeyHelper.js，具体实现可以看源码
graphView.key.combinationKey("save", [KeyHelper.CTRL, KeyHelper.S], 2)
// 监听按键变化
graphView.key.addChangeEventListener((k:string, type: string)=>{
    if(graphView.key.isCombinationKey('save')){
        exportH()
    }
})
// 检测是否触发组合键save，阻止浏览器默认保存行为，setExcludeDefaultBehavior返回值： true阻止、false不阻止
graphView.key.setExcludeDefaultBehavior(()=>{
    return graphView.key.isCombinationKey('save')
})

// 使用 js 的图形插件, 注册所有的js图形节点
graphView.use(js.plugin)

onMounted(() => {
    // 把图形容器插入html
    graphView.appendTo(document.querySelector(".app"))
    // 导入保存到本地的图像数据
    graphView.import( list )
})

// 解析
const parserJs = () =>{
    const data = graphView.export()
    const parser = new Parser()
    // 把js 图形节点 的解析函数从类上提取出来，添加到解析器上， Parser.getParserLis函数 可以完成提取工作
    parser.addParserFunction(Parser.getParserList(js.plugin))
    
    try {
        // 关闭所有生成的错误提示
        graphView.closeError()
        // 获取生成的代码，告诉解析器，入口节点名称是 Main， 返回值 code是数组
        const code = parser.start( data , "Main" /* Main为入口节点 */)
        // 利用 Function 对象运行生成的js代码
        const fun = new Function(code[0])
        fun()
        // console.log(code[0])
    } catch (error: any) {
        // 节点解析错误，回显到节点上
        graphView.useError(error)
        console.log(error);
    }
}

// 导出保存
const exportH = () => {
    const data = graphView.export()
    localStorage.setItem("data", JSON.stringify(data))
    console.log("保存成功")
}
</script>

<style lang="less">
.kk {
    color: rgb(0, 140, 255);
}

body {
    width: 100vw;
    height: 100vh;
    font-size: 12px;
}

* {
    padding: 0;
    margin: 0;

}
.btns {
    position: absolute;
    left: 10px;
    top: 0;
    z-index: 100;
}
button {
    margin: 10px;
}
</style>
